<template>
  <div id="helper">
    <TopBar>收益助手</TopBar>
    <HelperInfo  style="margin-top:1.5rem" @getHelperList="getList" @getMoney="getMoney" @getMonth="getMonth"></HelperInfo>
    <div id="totalReback">
      <h3>预期总收益</h3>
      <h1 v-if="showList" id="totalTxt">{{this.listItems.shouyi}}元</h1>
      <h1 v-else id="totalTxt">{{this.total}}元</h1>
      <Tag tag="预期利息+返利" style="height:0.48rem"></Tag>
      <p style="width:88%;font-size:0.32rem">*标注的参考收益及红包发放以实际平台为准，推荐结果仅供参考</p>
    </div>
    <div v-if="showList">
      <HelperItem v-for="item in listItems.cplist" :key="item.id" :item="item" style="margin:0 auto .29rem;"></HelperItem>
      <p style="font-size:0.32rem">如您已投资过上述平台请重新筛选。</p>
      <div id="helperBtn" @click="change">我要修改方案</div>
    </div>
    <div v-transfer-dom id="helperChange">
      <popup v-model="show">
        <div id="popBox">
          <span>请排除方案中您已投资过的平台</span>
          <div id="itemContainer">
            <checker 
              v-model="selectItems"
              default-item-class="itemBox" 
              selected-item-class="itemBox-selected"
              type="checkbox">
              <checker-item v-for="(item,index) in items" :key="index" :value="item">{{item.name}}</checker-item>
            </checker>
          </div>
          <div class="reBtn" @click="reSubmit">提交并查看方案</div>
        </div>
      </popup>
    </div>
    <toast 
    v-model="showPositionValue" 
    type="text" 
    :time="2000" 
    is-show-mask 
    :text="msg" 
    position="middle"></toast>
  </div>
</template>
<script>
import TopBar from '../../component/common/TopBar'
import HelperInfo from './children/HelperInfo'
import Tag from '../../component/common/Tag'
import HelperItem from './children/HelperItem'
import { Popup,TransferDom,Checker,CheckerItem,Toast} from 'vux'
import {getPTList,getHelperList,changeHelperList} from '../../../service/getData.js'
import { showMsg } from '../../../config/mUtils';
import {getSDK} from '../../../service/wxShare.js'

export default {
  components:{
    TopBar,
    HelperInfo,
    Tag,
    HelperItem,
    Popup,
    TransferDom,
    Checker,
    CheckerItem,
    Toast
  },
  beforeCreate(){
    getSDK()
  },
  mounted(){
    getPTList()
      .then(res=>{
        if(res.status == 1){
          this.items = res.list
        }
      })
  },
  data(){
    return {
      show:false,
      total:'0',
      listItems:[],
      items:[],
      selectItems:'',
      month:1,
      money:'',
      showList:false,
      showPositionValue:false,
      msg:''

    }
  },
  watch:{
    money(val1,val2){
      if(val1 != val2){
       this.showList = false 
      }
    },
    month(val1,val2){
      if(val1 != val2){
       this.showList = false 
      }
    }
  },
  methods:{
    getMoney(data){
      this.money = data
    },
    getMonth(data){
      this.month = data
    },
    getList(data){
      // //console.log(data);
      if(data.cplist.length != 0){
        this.showList = true
        this.listItems = data
      }
    },
    change(){
      this.show = true
    },
    reSubmit(){
      this.show = false
      let pids = []
      for(let item of this.selectItems){
        pids.push(item.id)
      }
      // //console.log(pids);
      // //console.log(`${this.money}/${this.month}`);
      changeHelperList(this.money,this.month,pids)
          .then(res=>{
            // //console.log(res)
            if(res.status == 1){
              this.listItems = res
            }
          })
    }
  },
  directives: {
    TransferDom,
  },
}
</script>
<style lang="less">
  div#helper{
    background-color:#fff;
    padding-bottom: 1.0667rem;
    #totalReback{
      margin-top: .5rem;
      margin-bottom: .3rem;
      display:flex;
      flex-direction: column;
      align-items: center;
      #totalTxt{
        color:#dd3930
      }
    }
    p{
      margin: 0 auto;
      margin-top: .5rem;
      color:#cdcdcd;
      text-align: center
    }
    #helperBtn{
      height: 1.2rem;
      line-height: 1.2rem;
      text-align: center;
      color: #000;
      width: 7.5rem;
      margin: 0.4rem auto 0;
      border: 1px solid #c6c6c6;
      border-radius: 2rem;
      font-size: 0.4rem
    }
  }
  #popBox{
    display: flex;
    flex-direction: column;
    align-items: center;
    span{
      font-size: 0.4rem;
      margin: 0.56rem 0 0.72rem;
    }
    #itemContainer{
      width: 9.2rem;
      max-height: 4rem;
      overflow: scroll;
      padding-left: .1rem
    }
    .itemBox{
      box-sizing: border-box;
      width: 2rem;
      height: 0.8rem;
      line-height: 0.8rem;
      text-align: center;
      border: 1px solid #c6c6c6;
      display: inline-block;
      margin-right: .3rem;
      margin-bottom: 0.4267rem;
      font-size: 0.3733rem;
    }
    
    .reBtn{
      height: 1.2rem;
      width: 7rem;
      line-height: 1.2rem;
      text-align: center;
      background-color: #e54e2b;
      color:#fff;
      border-radius: 2rem;
      margin-bottom: 0.8267rem;
      font-size: .4rem;
    }
  .itemBox-selected{
      border: 1px solid red;
    }
    .weui-toast,.weui-toast_text,.vux-toast-middle{
      width: 70% !important;
      p.weui-toast__content{
        margin: 0 !important;
      }
    }
  }
</style>
